<template>
    <div class="container">
        <!-- 轮播图 -->
        <swiper autoplay="true" interval='5000' circular="true">
            <swiper-item>
                <image class='swipe' src="/static/img/test2.jpg"/>
            </swiper-item> 
            <swiper-item>
                <image class='swipe' src="/static/img/test5.jpg"/>
            </swiper-item>     
        </swiper>
        <div class="iconlist">
            <div v-for="(icon,index) in iconList" :key="index" class="icon">
                <img :src="icon.src" class="iconimg"/>
                <div style="font-size:22rpx">{{icon.desc}}</div>
            </div>
        </div>
        <!-- 主内容 -->
        <div class="cttt">健康资讯</div>
        <div class="pt" v-for="(intro,index2) in introList" :key="index2">
            <div class="photo"><img :src="intro.src" style="width:100%;height:100%"/></div>
            <div class="intro">
                <div class="intro-tt">{{intro.title}}</div>
                <div class="intro-ct">{{intro.desc}}</div>
                <div class="intro-time">{{intro.time}}</div>
            </div>
        </div>
        <i-load-more tip="没有更多了" :loading="more" />
        <!-- 授权按钮 -->
        <div class="shak" v-if="canIUse">
            <div class="modal">
                <div class="modal_header mgb30">
                    温馨提示
                </div>
                <div class="modal_body mgb40">
                    使用前需授权获取微信用户信息
                </div>
                <div class="modal_footer mgb20">
                    <navigator v-if="canIuse" open-type='exit' target="miniProgram">
                        <button class="c">退出</button>
                    </navigator>
                    <button open-type="getUserInfo" class="getUserBtn" @getuserinfo="bindGetUserInfo">同意</button>
                </div> 
            </div>
        </div>
   </div>
</template>
<script>
import { test } from '@/api/index'
export default {
    data() {
        return {
            more:false,
            canIUse:false,
            canIuse: wx.canIUse('navigator.open-type.exit'),
            iconList:[{
                src:'/static/img/type1.png',
                desc:'欢迎'
            },{
                src:'/static/img/type2.png',
                desc:'光临'
            },{
                src:'/static/img/type3.png',
                desc:'景煌'
            },{
                src:'/static/img/type4.png',
                desc:'医院'
            },],
            introList:[],
        }
    },
    methods:{
        async getTest() {
            const { data } = await test()
            console.log(data)
            for(let k in this.iconList) {
                this.iconList[k].desc = data[k]
            }
        },
        //授权后获取用户信息
        bindGetUserInfo: function(e) {
            if (e.mp.detail.errMsg === 'getUserInfo:ok') {
                let userInfo = e.mp.detail.userInfo
                this.canIUse = false;
            }
        },
    },
    onLoad() {
        this.getTest()
        let _this = this
        wx.getSetting({
            success(res) {
                // 如果没能获取用户信息
                if (!res.authSetting['scope.userInfo']) {
                    _this.canIUse = true
                }
            }
        })
        // 使用mock
        var Mock = require('mockjs')    
        var introList = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'introList|1-3': [{
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'src|1': [
                    "/static/img/test1.jpg",
                    "/static/img/test3.jpg",
                    "/static/img/test6.jpg",
                    "/static/img/test7.jpg",
                ],
                'title|1':[
                    "今日要闻",
                    "特别报道",
                    "回顾昨天",
                    "蔡徐坤打球"
                ],
                'desc|1':[
                    "这里是一些详细说明...",
                    "我觉得挺有意思...",
                    "告诉大家个好消息!!"
                ],
                'time':function() {
                    return Mock.Random.datetime()
                }
            }]
        })
        // 输出结果
        console.log(introList)
        this.introList = introList.introList
    }
} 
</script>

<style lang='stylus' scoped>
swiper
    height 400rpx
.swipe
    width 100%
.shak
    height 100%
    width 100%
    background rgba(0,0,0,0.8)
    position fixed
    top 0
    z-index 99
.modal
    width 600rpx
    padding 30rpx
    background-color #fff
    border-radius 8rpx
    position fixed
    top 30%
    left 50%
    transform translate(-50%)
    text-align center
.modal_header
    font-size 36rpx
    font-weight 900
.modal_body
    font-size 32rpx
    padding 10rpx
.modal_footer
    display flex
    justify-content space-around
button
    margin 0
    width 200rpx
.c
    color green
.getUserBtn
    background-color green
    color white
.iconlist
    display flex
    justify-content space-around
    align-items center
    height 160rpx
.icon
    width 120rpx
    height 120rpx
    margin 20rpx
    display flex
    flex-direction column
    justify-content center
    align-items center
.iconimg
    width 60rpx
    height 60rpx
    border-radius 50%
    margin 10rpx
.cttt
    margin 20rpx 
    font-size 36rpx
.pt
    margin 10rpx 20rpx
    border-radius 10rpx
    height 550rpx
    overflow hidden
    position relative
    background linear-gradient(transparent,#f8f8f8 60%,#fff)
.photo
    width 100%
    height 70%
    position absolute
    z-index -1
.intro
    width 100%
    height 40%
    bottom 0
    position absolute
    font-size 20rpx
.intro-time
    font-size 24rpx
    color #cdcdcd
    text-align right
    margin 0 20rpx
.intro-tt
    margin 0 20rpx
    font-size 32rpx
.intro-ct
    margin 10rpx 40rpx
    font-size 28rpx
</style>
